<template>
  <div style="width: 100%;margin-left: auto;margin-right: auto;">
    <div class="my-body">
      <Brow class="nav" :class="navBarFixed === true ? 'navBarWrap' :''"></Brow>
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>

import Brow from "./Brow.vue";
import {onMounted, onUnmounted, ref} from "vue";

let navBarFixed = ref(false)

const watchScroll = ()=> {
  let scrollTop =
      window.pageYOffset ||
      document.documentElement.scrollTop ||
      document.body.scrollTop;
  //  当滚动超过 90 时，实现吸顶效果
  if (scrollTop > 90) {
    navBarFixed.value = true;
  } else {
    navBarFixed.value = false;
  }
}

// 页面挂载
onMounted(()=>{
  window.addEventListener("scroll", watchScroll)
})

onUnmounted(()=>{
  window.removeEventListener('scroll', watchScroll);
})

</script>

<style scoped>
.my-body{
  padding-bottom: 30px;
}
.nav{
  width:100%;
}
.navBarWrap {
  position: fixed;
  top:0;
  z-index:999;
  opacity: 0.8;
}
</style>
